<template>

    <router-view v-slot="{ Component }">
        <transition>
            <keep-alive>
                <component :is="Component"/>
            </keep-alive>
        </transition>
    </router-view>

    <nav>
        <router-link to="/" class="tab-bar-item">
            <div class="icon"><i class="iconfont icon-shouye"></i></div>
            <div>Home</div>
        </router-link>

        <router-link to="/category" class="tab-bar-item">
            <div class="icon"><i class="iconfont icon-fenlei"></i></div>
            <div>分类</div>
        </router-link>

        <router-link to="/shopcart" class="tab-bar-item">
            <div class="icon">
                <van-badge :content="0" max="9">
                    <i class="iconfont icon-gouwuchekong"></i>
                </van-badge>

            </div>
            <div>购物车</div>
        </router-link>

        <router-link to="/profile" class="tab-bar-item">
            <div class="icon"><i class="iconfont icon-yonghu"></i></div>
            <div>我的</div>
        </router-link>


    </nav>
</template>

<style lang="scss">
@import "assets/css/base.css";
@import "assets/css/iconfont.css";

#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

nav {
    background-color: #f6f6f6;
    //padding: 30px;
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    a {
        font-weight: bold;
        color: #2c3e50;


        &.router-link-exact-active {
            //color: #42b983;
            color: var(--color-high-text);
        }
    }

    .tab-bar-item {
        flex: 1;
        height: 50px;
        font-size: var(--color-text);
    }

    .tab-bar-item .icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-top: 3px;
        vertical-align: middle;
    }
}
</style>
<script setup>
</script>